<template>
  <div class="login-container">
    <!-- 新增动态粒子背景容器 -->
    <div class="particles"></div>

    <div class="login-box">
      <div class="logo">
        <h1 class="login-title">富联WMS</h1>
        <!-- 添加动态光效 -->
        <div class="logo-glow"></div>
      </div>

      <h2 class="welcome-text">欢迎登录</h2>

      <form class="login-form" @submit.prevent="handleLogin">
        <!-- 输入框增加图标与悬浮效果 -->
        <div class="form-group">
          <div class="input-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#667eea">
              <path
                d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
            </svg>
          </div>
          <input type="text" id="username" v-model="form.username" placeholder="账号" autocomplete="username">
        </div>

        <div class="form-group">
          <div class="input-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#667eea">
              <path
                d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" />
            </svg>
          </div>
          <input type="password" id="password" v-model="form.password" placeholder="密码" autocomplete="current-password">
          <!-- 密码可见性切换 -->
          <!-- <span class="toggle-pwd" @click="showPassword = !showPassword">
            <svg v-if="showPassword" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#667eea">
              <path d="M12 6a9.77 9.77 0 0 1 8.82 5.5A9.77 9.77 0 0 1 12 17a9.77 9.77 0 0 1-8.82-5.5A9.77 9.77 0 0 1 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5a2.5 2.5 0 0 1 0 5 2.5 2.5 0 0 1 0-5m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 15 12 15s4.5-2.02 4.5-4.5S14.48 7 12 7z"/>
            </svg>
            <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#667eea">
              <path d="M12 6a9.77 9.77 0 0 1 8.82 5.5 9.647 9.647 0 0 1-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07.01-2.48-2.02-4.49-4.5-4.49-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68A11.738 11.738 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02a2.5 2.5 0 0 1-2.5-2.5c0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75a4.6 4.6 0 0 0-.36 1.78 4.507 4.507 0 0 0 6.27 4.14l.98.98c-.88.24-1.8.38-2.75.38a9.77 9.77 0 0 1-8.82-5.5c.7-1.43 1.72-2.61 2.93-3.53z"/>
            </svg>
          </span> -->
        </div>

        <!-- 增加安全提示 -->
        <div class="security-tip">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#4CAF50">
            <path
              d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z" />
          </svg>
          <span>您的信息已通过SSL加密保护</span>
        </div>

        <!-- 按钮加载状态 -->
        <button type="submit" class="login-button" :disabled="loading">
          <span v-if="!loading">登录</span>
          <svg v-else class="loading-spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10" stroke="rgba(255,255,255,0.3)" stroke-width="4" fill="none" />
            <path d="M12 2a10 10 0 0 1 10 10" stroke="white" stroke-width="4" stroke-linecap="round" />
          </svg>
          <svg width="34" height="34" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="37" cy="37" r="35.5" stroke="white" stroke-width="3"></circle>
            <path
              d="M25 35.5C24.1716 35.5 23.5 36.1716 23.5 37C23.5 37.8284 24.1716 38.5 25 38.5V35.5ZM49.0607 38.0607C49.6464 37.4749 49.6464 36.5251 49.0607 35.9393L39.5147 26.3934C38.9289 25.8076 37.9792 25.8076 37.3934 26.3934C36.8076 26.9792 36.8076 27.9289 37.3934 28.5147L45.8787 37L37.3934 45.4853C36.8076 46.0711 36.8076 47.0208 37.3934 47.6066C37.9792 48.1924 38.9289 48.1924 39.5147 47.6066L49.0607 38.0607ZM25 38.5L48 38.5V35.5L25 35.5V38.5Z"
              fill="white"></path>
          </svg>
        </button>
      </form>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ElLoading, ElMessage } from 'element-plus'

export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    const form = reactive({
      username: '',
      password: ''
    });

    const handleLogin = () => {
      console.log('登录信息:', form);
      const loading = ElLoading.service({
        lock: true,
        text: '正在登录中...',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      axios.get("http://localhost:5288/api/Authoize/Login", {
        params: {
          name: form.username,
          pwd: form.password
        }
      }).then((result) => {
        if (result.data == '账号或密码错误') {
          ElMessage({
            type: 'error',
            message: '账号或密码错误！'
          });
          router.push('/login')
        } else {
          console.info(result.data)
          localStorage.setItem('token', result.data.token);
          localStorage.setItem('rolesId', result.data.rolesId);
          localStorage.setItem("userId", result.data.userId)
          localStorage.setItem("userLName", result.data.userLName)
          ElMessage({
            type: 'success',
            message: '登录成功！'
          });
          router.push('/main')
          store.commit('setname', form.username);
        }
      }).catch((err) => {
        console.info(err)
      }).finally(() => {
        loading.close();
      })
    };

    return {
      form, handleLogin
    }
  }
}
</script>

<style scoped>
/* 新增粒子背景 */
.login-container {
  position: relative;
  min-height: 106vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0px, transparent 2px);
  background-size: 200px 200px;
  z-index: 0;
}

.login-box {
  position: relative;
  width: 380px;
  padding: 40px 50px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  text-align: center;
  z-index: 1;
  backdrop-filter: blur(10px);
  transform: translateY(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* .login-box:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
} */

.logo {
  margin-bottom: 15px;
  position: relative;
}

/* .logo-glow {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.4) 0%, transparent 70%);
  z-index: -1;
} */

.login-title {
  font-size: 32px;
  color: #4a5568;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

.welcome-text {
  font-size: 20px;
  color: #718096;
  margin-bottom: 30px;
  font-weight: 500;
  position: relative;
}

.login-form {
  margin-top: 30px;
}

.form-group {
  position: relative;
  margin-bottom: 30px;
  text-align: left;
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.toggle-pwd {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
}

.form-group input {
  width: 85%;
  padding: 15px 15px 15px 45px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  background-color: white;
  transition: all 0.3s ease;
  outline: none;
}

.form-group input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.security-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #718096;
  margin: 20px 0;
  padding: 8px;
  background: rgba(76, 175, 80, 0.08);
  border-radius: 8px;
}

.login-button {
  width: 100%;
  padding: 17px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
  position: relative;
  overflow: hidden;
}

.login-button span {
  position: relative;
  z-index: 2;
}

.login-button svg {
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.login-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.6);
}

.login-button:hover svg {
  transform: translateX(5px);
}

.login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.login-button:hover::before {
  left: 100%;
}

/* 加载动画 */
.loading-spinner {
  animation: spin 1s linear infinite;
  width: 24px;
  height: 24px;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 480px) {
  .login-box {
    width: 90%;
    padding: 30px;
  }

  .login-button svg:last-child {
    display: none;
  }
}
</style>
